<template>
  <el-row type="flex" justify="center">
    <van-button>vant 按钮</van-button>
  </el-row>

  <el-row type="flex" justify="center">
    <van-button type="primary">vant 按钮</van-button>
  </el-row>

  <el-row type="flex" justify="center">
    <el-button>element 按钮</el-button>
  </el-row>

  <el-row type="flex" justify="center">
    <el-button type="primary" @click="showMessage">消息</el-button>
  </el-row>

  <h2>测试登录流程</h2>
  <el-form
    ref="elFormRef"
    :inline="true"
    :model="loginForm"
    class="demo-form-inline"
  >
    <el-form-item
      label="用户名"
      :rules="{
        required: true,
        message: '请输入用户名',
      }"
      prop="userName"
    >
      <el-input
        v-model="loginForm.userName"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="密码"
      :rules="{
        required: true,
        message: '请输入密码',
      }"
      prop="password"
    >
      <el-input
        v-model="loginForm.password"
        type="password"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">登录</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="danger" @click="handleExist">退出</el-button>
    </el-form-item>
  </el-form>

  <template v-if="userStore.isLogin">
    <h2>用户信息</h2>

    <el-form
      ref="userForm"
      :model="user.info"
      :rules="user.rules"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="user.info.userName" />
      </el-form-item>

      <el-form-item label="手机" prop="userPhone">
        <el-input v-model="user.info.userPhone" type="number" />
      </el-form-item>

      <el-form-item label="性别" prop="userGender">
        <el-radio-group v-model="user.info.userGender">
          <el-radio
            v-for="(item, index) in UserGenderList"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄" prop="userPhone">
        <el-input-number v-model="user.info.userAge" :step="1" :min="0" />
      </el-form-item>

      <el-form-item label="地址" prop="userAddress">
        <el-input v-model="user.info.userAddress" />
      </el-form-item>

      <el-form-item label="状态" prop="userStatus">
        <el-radio-group v-model="user.info.userStatus">
          <el-radio
            v-for="(item, index) in UserStatusList"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

      <el-form-item label="头像" prop="userAvatar">
        <el-upload
          action="https://file.alcyh.com/upload"
          name="file"
          list-type="picture-card"
          :limit="1"
          :file-list="(user.avatarList as any)"
          @preview="handlePreview"
          @remove="handleRemove"
          @success="handleUploadSuccess"
        >
          <el-icon><plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleEdit">修改</el-button>
      </el-form-item>
    </el-form>
  </template>
</template>

<script lang="ts">
import { Plus } from "@element-plus/icons-vue";

export default {
  name: "TestPlugins",

  components: { Plus },
};
</script>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { LoginForm, User, UserGenderList, UserStatusList } from "@/entity/User";
import { ElForm, ElMessage } from "element-plus";
import type { FormItemRule } from "element-plus/lib/components/form/src/form.type";
import type { UploadFile } from "element-plus/lib/components/upload/src/upload.type";

import { useUserStore } from "@/pinia-store/user";
import { modifyUser } from "@/api/user";
import { Result } from "@/entity/Result";
import { phoneReg } from "@/utils/validator";
const userStore = useUserStore();

function showMessage() {
  ElMessage.success("这个是消息");
}

// #region 登录
const loginForm = reactive<LoginForm>({
  userName: "",
  password: "",
});

const elFormRef = ref<InstanceType<typeof ElForm>>();

// 登录
function handleSubmit() {
  elFormRef.value.validate(function (isValid, invalidFields) {
    if (isValid) {
      userStore.login(loginForm).then(() => {
        ElMessage.success("登录成功");
      });
    } else {
      console.log(invalidFields);
    }
  });
}

// 退出
function handleExist() {
  userStore.logout();
}
// #endregion

// #region 编辑
const userForm = ref<InstanceType<typeof ElForm>>();

const user = reactive({
  // 引用
  form: userForm,
  // 用户信息
  info: {} as User,
  // 校验规则
  rules: {
    userName: [{ required: true, message: "请输入用户名" }],
    userPhone: [
      { required: true, pattern: phoneReg, message: "请输入正确的手机" },
    ],
    userGender: [{ required: true, message: "请选择性别" }],
    userAge: [{ required: true, message: "请输入年龄" }],
    userAddress: [{ required: true, message: "请输入地址" }],
    userStatus: [{ required: true, message: "请选择状态" }],
    userAvatar: [{ required: true, message: "请上传头像" }],
  } as Record<keyof User, FormItemRule[]>,
  // 头像
  avatarList: [] as { name: string; url: string }[],
});

// 登录后赋值表单
watch(
  () => userStore.isLogin,
  function () {
    if (userStore.isLogin) {
      user.info = Object.assign({}, userStore.userInfo);
      user.avatarList = [
        {
          name: userStore.userInfo.userAvatar,
          url: userStore.userInfo.userAvatar,
        },
      ];
    }
  }
);

// 预览
function handlePreview(file: UploadFile) {
  window.open(file.url);
}

// 删除
function handleRemove() {
  user.info.userAvatar = "";
  user.avatarList = [];
}

// 上传成功
function handleUploadSuccess(res: Result<string>) {
  if (res.code === 200) {
    user.info.userAvatar = res.data;
    user.avatarList = [
      {
        name: res.data,
        url: res.data,
      },
    ];
  } else {
    ElMessage.error(res.message);
  }
}

// 编辑
function handleEdit() {
  user.form.validate(function (isValid) {
    if (isValid) {
      modifyUser(user.info).then(() => {
        ElMessage.success("编辑成功");
        // 重新获取用户信息
        userStore.getUserInfo();
      });
    }
  });
}

// #endregion
</script>
